<template>
	<view class="ys">
		<view class="infoli">
			<view class="title">
				姓名<text>*</text>
			</view>
			<uni-easyinput v-model="memberXm" placeholder="请输入姓名"></uni-easyinput>
		</view>
		<view class="infoli">
			<view class="title">
				设备id<text>*</text>
			</view>
			<view class="selectbox">
				<uni-data-select v-model="deviceSn" :localdata="deviceSnList"></uni-data-select>
			</view>
		</view>
		<view class="infoli">
			<view class="title">
				门禁通行授权时间<text>*</text>
			</view>
			<view class="selectbox">
				<uni-datetime-picker type="date" :border="false" :clear-icon="false" v-model="doorEndTime" />
			</view>
		</view>
		<view class="infoli">
			<view class="title">
				人脸照片
			</view>
			<view>
				<view class="imgitem" @click="uploadImg('imageUrl')">
					<image :src="imageUrl || '/static/img/sfz.jpg'" mode="aspectFill"></image>
					<text v-if="imageUrl == ''">上传人脸照片</text>
				</view>
			</view>
		</view>
		<button class="submit" :loading="loading" :disabled="loading" @click="send">提交</button>
	</view>
</template>

<script>
	import {
		getEntranceList,
		uploadFace
	} from "@/api/api.js"
	export default {
		data() {
			return {
				memberXm: '',
				loading: false,
				deviceSn: '',
				deviceSnList: [],
				list: [],
				doorEndTime: '',
				imageUrl: ''
			}
		},
		onLoad() {
			this.getEntranceList()
		},
		methods: {
			uploadImg(type) {
				let that = this
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: '加载中'
						})
						for (let i = 0; i < igmFile.length; i++) {
							uni.uploadFile({
								url: `${that.$config.websiteUrl}common/upload`,
								header: {
									'Authorization': uni.getStorageSync('token')
								},
								filePath: igmFile[i],
								name: 'file',
								success: (res) => {
									uni.hideLoading()
									let imgRes = JSON.parse(res.data); //微信和头条支持
									if (imgRes.code == 200) {
										let imgData = imgRes
										that.imageUrl = imgData.url
									} else {
										return uni.$showMsg(res.msg)
									}
								},
								fail(err) {
									uni.hideLoading()
								}
							})
						}
					},
				});
			},
			getEntranceList() {
				getEntranceList().then(res => {
					if (res.code == 200) {
						this.list = res.data
						this.list.forEach(item => {
							this.deviceSnList.push({
								text: item.houseName + ' ' + item.serialNum,
								value: item.serialNum
							})
						})
					}
				})
			},
			send() {
				if (!this.deviceSn || this.deviceSn == '') return uni.$showMsg('请选择设备id')
				if (!this.doorEndTime || this.doorEndTime == '') return uni.$showMsg('请选择门禁通行授权时间')
				if (!this.imageUrl || this.imageUrl == '') return uni.$showMsg(
					'请上传人脸照片')
				if (!this.memberXm || this.memberXm == '') return uni.$showMsg(
					'请输入姓名')
				var that = this
				that.loading = true
				uploadFace({
					deviceSn: that.deviceSn,
					doorEndTime: that.doorEndTime,
					imageUrl: that.imageUrl,
					memberXm: that.memberXm,
				}).then(res => {
					that.loading = false
					uni.$showMsg(res.msg)
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		padding-top: 20px;
	}

	.ys {
		background: #fff;
		width: 96%;
		margin: 0 auto;
		padding: 15px;
		box-sizing: border-box;
		border-radius: 8px;
	}

	.imgitem {
		position: relative;
		width: 100%;
		border: 1px solid #eee;
		border-radius: 8px;

		image {
			width: 100%;
			height: 150px;
		}

		text {
			position: absolute;
			top: 75%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 12px;
			color: #777;
			display: block;
			text-align: center;
			width: 100%;
		}
	}

	.selectbox {
		border: 1px solid #dcdfe6;
		border-radius: 4px;
	}

	.infoli {
		width: 100%;
		margin-bottom: 10px;

		.title {
			font-weight: bold;
			font-size: 14px;
			margin-bottom: 10px;

			text {
				color: #f00;
			}
		}
	}
</style>